<template>
  <el-dialog
    :modelValue="visible"
    @update:modelValue="$emit('update:visible', $event)"
    class="report_dialog"
    width="30%"
    :close-on-click-modal="false"
    :show-close="false"
    :close-on-press-escape="false"
  >
    <div class="title">用户信息</div>
    <el-form ref="menuRef" :model="form" :rules="rules" label-width="auto" label-position="top">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model.trim="form.userName" placeholder="请输入用户名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input v-model.trim="form.password" placeholder="请输入密码" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="loading">
          <template #loading>
            <div class="custom-loading">
              <svg class="circular" viewBox="-10, -10, 50, 50">
                <path
                  class="path"
                  d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
                  style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
                />
              </svg>
            </div>
          </template>
          提交</el-button
        >
        <el-button @click="handleClose">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, useDisabled } from 'element-plus'
import { saveAs } from 'file-saver'
import { useAuthStore } from '@/stores/auth.js'
import {
  listFireUserAPI,
  updateFireUserAPI,
  insertFireUserAPI,
  deleteFireUserAPI,
} from '@/api/user.js'
const emit = defineEmits(['update:visible'])
const authStore = useAuthStore()
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  userInfo: {
    type: Object,
  },
})
const form = ref<any>({})
const loading = ref(false)
const rules = ref({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
    { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\\ |', trigger: 'blur' },
  ],
})
const { proxy } = getCurrentInstance()
const state = reactive({})
watch(
  () => props.userInfo,
  (val) => {
    console.log(val, ';valval')
    form.value.userName = val.userName
    form.value.password = val.rowPassword
    form.value.id = val.id
  },
)
const handleClose = () => {
  loading.value = false
  emit('update:visible', false)
  proxy.$refs['menuRef'].resetFields()
  form.value = {}
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs['menuRef'].validate((valid) => {
    if (valid) {
      console.log(valid, ';validvalid')
      loading.value = true
      if (form.value.id) {
        updateFireUserAPI(form.value)
          .then((res) => {
            ElMessage.success('编辑成功！')
            handleClose()
          })
          .catch(() => {
            handleClose()
          })
      } else {
        insertFireUserAPI(form.value)
          .then((res) => {
            ElMessage.success('新增成功！')
            handleClose()
          })
          .catch(() => {
            handleClose()
          })
      }
    }
  })
}
onBeforeMount(() => {})
onMounted(() => {})
defineExpose({ state })
</script>
<style lang="scss" scoped>
.report_dialog {
  .custom-loading {
    .circular {
      margin-right: 6px;
      width: 18px;
      height: 18px;
      animation: loading-rotate 2s linear infinite;
      .path {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: var(--el-button-text-color);
        stroke-linecap: round;
      }
    }
  }
  .title {
    text-align: center;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 15px;
  }
}
</style>
